@import "@automattic/onboarding/styles/mixins";
@import "@automattic/onboarding/styles/variables";
@import "@automattic/typography/styles/fonts";

$design-picker-category-filter-text-color: #3c434a;
$design-picker-category-filter-text-color-active: var(--studio-gray-100);

.design-picker-category-filter {
	@include break-small {
		flex: 0 245px;
		padding-right: 1rem;
	}

	button.components-button.design-picker-category-filter__menu-item {
		padding: 0;
		color: $design-picker-category-filter-text-color;
		display: block;
		width: auto;
		font-size: 1rem;

		&:hover:not(:disabled),
		&:active:not(:disabled) {
			box-shadow: none;
			background: transparent;
			.design-picker-category-filter__item-name {
				text-decoration: underline;
				color: $design-picker-category-filter-text-color-active;
			}
		}

		&.is-pressed {
			.design-picker-category-filter__item-name {
				text-decoration: underline;
				font-weight: 500;
				color: $design-picker-category-filter-text-color-active;

				&:hover:not(:disabled) {
					color: $design-picker-category-filter-text-color-active;
				}
			}
			background: transparent;

			&:focus:not(:disabled),
			&:focus-visible:not(:disabled) {
				box-shadow:
					inset 0 0 0 1px #fff,
					0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
			}

			&:focus:not(:disabled):not(:focus-visible) {
				box-shadow: none;
			}
		}

		.design-picker-category-filter__recommended-badge {
			display: inline-block;
			font-size: 0.75rem;
			padding: 0 10px;
			line-height: 20px;
			margin-left: 12px;
			background-color: #b8e6bf;
			color: #00450c;
			border-radius: 4px;
		}

		.components-menu-item__item {
			min-width: auto;
		}
	}
}

.design-picker-category-filter__sidebar {
	display: none;

	@include break-small {
		display: block;
	}
}

.design-picker-category-filter__dropdown {
	@include break-small {
		display: none;
	}

	font-family: $sans;
	font-size: $font-body-small;
	line-height: 24px;
	font-weight: 500;
	border-radius: 4px;
	border: 1px solid #c3c4c7;
	padding: 0 35px 0 10px;
	margin-bottom: 32px;
	min-height: 44px;
	height: 44px;
	width: 100%;
	-webkit-appearance: none;
	appearance: none;
	background:
		transparent
		url()
		no-repeat right 12px top 50%;
	background-size: 20px;

	&:focus,
	&:focus-visible {
		outline: none;
		box-shadow: 0 0 0 2px var(--color-primary-light);
	}

	&:focus:not(:focus-visible) {
		outline: none;
		box-shadow: none;
	}
}
